<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
    <title>网络调试助手</title>
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="./node_modules/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <link href="./static/css/index.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <div class="row border-top overflow-hidden p-0" style="height: 100vh;box-sizing: border-box">
            <div class="col-5 col-sm-4 col-md-3 col-lg-3 p-0 border-right d-flex flex-column">
                <ul class="list-group m-1">
                    <li class="list-group-item disabled font-weight-bold p-1" aria-disabled="true">网络设置</li>
                    <li class="list-group-item p-2">
                        <div class="form-group mb-0">
                            <label class="mb-0" for="protocol-type">网络协议选择</label>
                            <select class="form-control form-control-sm" id="protocol-type">
                                <option value="wss">WebSocket</option>
                                <option value="tcp">TCP Client</option>
                                <option value="tcps">TCP Server</option>
                                <option value="udp">UDP Client</option>
                                <option value="udps">UDP Server</option>
                            </select>
                        </div>
                    </li>
                    <li class="list-group-item p-2">
                        <div class="form-group mb-0">
                            <label class="mb-0" for="host">主机地址</label>
                            <input type="text" class="form-control form-control-sm" id="host" aria-describedby="emailHelp">
                            <div class="invalid-feedback d-none">
                                主机地址不合法！
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item p-2">
                        <div class="form-group mb-0">
                            <label class="mb-0" for="port">主机端口</label>
                            <input type="text" class="form-control form-control-sm" id="port" aria-describedby="emailHelp">
                            <div class="invalid-feedback d-none">
                                主机端口不合法！
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item p-2">
                        <button type="button" class="btn btn-danger btn-sm btn-block m-0 d-none" id="close">
                            <i class="fa fa-cog fa-spin"></i>
                            断开
                        </button>
                        <button type="button" class="btn btn-success btn-sm btn-block m-0 d-block" id="connect">
                            <i class="fa fa-circle-o-notch"></i>
                            连接
                        </button>
                    </li>
                </ul>
                <ul class="list-group m-1 flex-grow-1 flex-shrink-1" style="overflow-scrolling: auto">
                    <div class="card d-flex" style="background: #fff">
                        <div class="card-header p-1 font-weight-bold" style="color: #6c757d;background: #fff">
                            历史连接
                        </div>
                        <ul class="list-group list-group-flush flex-grow-1 history-connect-info">
                            <li class="list-group-item p-2 history-default">
                                <button type="button" class="btn btn-light btn-sm btn-block">
                                    暂无数据
                                </button>
                            </li>
                        </ul>
                        <div class="card-body p-1 d-flex">
                            <button type="button" class="btn btn-link btn-sm flex-grow-1 p-0 text-decoration-none" id="clear-link">清空记录</button>
<!--                            <button type="button" class="btn btn-link btn-sm flex-grow-1 p-0 text-decoration-none">更多记录</button>-->
                        </div>
                    </div>
                </ul>
            </div>
            <div class="col col-sm col-md col-lg p-1 d-flex flex-column position-relative h-100" style="box-sizing: border-box">
                <div class="card w-100 flex-grow-1 h-100 overflow-auto">
                    <div class="card-header p-1 d-flex justify-content-between">
                        <b>数据日志</b>
                        <a href="#" id="clear-log">清空日志</a>
                    </div>
                    <div class="card-body p-1 h-100">
                        <div class="list-group border-0 h-100" id="log" style="overflow-y: auto"></div>
                    </div>
                </div>
                <div class="card w-100 mt-1" style="height: 150px;box-sizing: border-box;">
                    <div class="card-header p-1">
                        <b>数据发送</b>
                    </div>
                    <div class="card-body p-1 d-flex flex-column">
                        <textarea class="form-control flex-grow-1 mb-1" id="send-message" style="resize: none;font-size: 12px;"></textarea>
                        <button type="button" class="btn btn-primary btn-sm" id="send">发送</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="./static/js/index.js"></script>
</html>